<template>
    <van-cell class="orderItem">
        <div class="head">
            <div class="head_left" @click="$router.push('/shopDetail/'+orderItem.shop_id._id)">
                <div class="shopAvatar"><img src="@/assets/img/shop/110000793.webp" alt=""></div>
                <div class="shopName">{{orderItem.shop_id.name}}</div>
                <van-icon name="arrow"/>
            </div>
            <div class="head_right">
                <span class="status" :class="orderItem.status=='待支付'?'toPaid':''">{{orderItem.status}}</span>
            </div>
        </div>
        <div class="main">
            <div class="foodList">
                <div class="foodItem" v-for="(food,index) in orderItem.food" :key="'food'+index">
                    <div class="img"><img :src="'http://127.0.0.1:3000/images/food/'+food.food_id.foodImgSrc" alt=""></div>
                    <div class="foodStatus" v-if="food.foodStatus">{{food.foodStatus}}</div>
                </div>
                <!-- <div class="foodItem">
                    <div class="img"><img src="@/assets/img/shop_detail/food/food.jpeg" alt=""></div>
                    <div class="foodStatus">已下架</div>
                </div>
                <div class="foodItem">
                    <div class="img"><img src="@/assets/img/shop_detail/food/food.jpeg" alt=""></div>
                    <div class="foodStatus">已下架</div>
                </div>
                <div class="foodItem">
                    <div class="img"><img src="@/assets/img/shop_detail/food/food.jpeg" alt=""></div>
                    <div class="foodStatus">已下架</div>
                </div> -->
            
                <div class="oneFoodName" v-if="orderItem.food.length == 1">{{orderItem.food[0].food_id.foodName}}</div>
            </div>
            <div class="orderSettle">
                <div class="orderPrice">¥<span>{{totalPrice}}</span></div>
                <div class="orderCount">共{{totalNum}}件</div>
            </div>
        </div>
        <div class="foot">
            <div class="funcGroup">
                <!-- <van-button plain round color="#02b6fd">去支付</van-button> -->
                <van-button plain round type="default">相似商家</van-button>
                <van-button plain round color="#02b6fd" v-if="showOrderAgain">再来一单</van-button>
            </div>
        </div>
    </van-cell>
</template>

<script>
import { computed, ref } from 'vue';
export default {
    name:'OrderItem',
    setup(props,context){
        const totalPrice = computed(()=>{
            // 实付配送费
            let actually_delivery_fee = parseFloat(props.orderItem.actually_delivery_fee);
            // 包装费
            let pack_fee = parseFloat(props.orderItem.pack_fee);
            // 商品实付价格
            let actually_foods_fee = 0;
            props.orderItem.food.forEach(item=>{
                actually_foods_fee += parseFloat(item.food_actually_pay) * parseInt(item.food_num)
            })

            return parseFloat(actually_delivery_fee + pack_fee + actually_foods_fee).toFixed(2);
        });
        const totalNum = computed(()=>{
            let foodTotalNum = 0;
            props.orderItem.food.forEach(item=>{
                foodTotalNum += parseInt(item.food_num);
            })
            return foodTotalNum;
        });
        const showOrderAgain = computed(()=>{
            return props.orderItem.create_time >= new Date().getTime() - 86400000;
        });
        return{
            totalPrice,
            totalNum,
            showOrderAgain,
        }
    },
    props:['orderItem']
}
</script>

<style>
.orderItem.van-cell{padding: 10px 15px;margin-bottom: 10px;border-radius: 8px;}
.orderItem .van-cell__value{display: flex;flex-direction: column;}
.orderItem .van-cell__value>.head,
.orderItem .van-cell__value>.main,
.orderItem .van-cell__value>.foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.orderItem .van-cell__value .head{letter-spacing: 1px;}
.orderItem .van-cell__value .head .head_left{width: 80%;display: flex;align-items: center;}
.orderItem .van-cell__value .head .head_left>div{margin-right: 5px;}
.orderItem .van-cell__value .head .head_left .shopAvatar{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    overflow: hidden;
}
.orderItem .van-cell__value .head .head_left .shopAvatar img{width: 100%;height: 100%;}
.orderItem .van-cell__value .head .head_left .shopName{
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #000 ;
}
.orderItem .van-cell__value .head .head_left .van-icon{}
.orderItem .van-cell__value .head .head_right{flex-shrink: 0;width: 20%;text-align: right;}
.orderItem .van-cell__value .head .head_right .status{font-size: 14px;}
.orderItem .van-cell__value .head .head_right .status.toPaid{color: #02b6fd;}

.orderItem .van-cell__value .main{
    margin: 10px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.orderItem .van-cell__value .main .food_left{
    width: 80%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.orderItem .van-cell__value .main .foodList{
    box-sizing: border-box;
    padding-right: 5px;
    width: 80%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
.orderItem .van-cell__value .main .foodList .foodItem{
    flex-shrink: 0;
    margin-right: 5px;
    width: calc((100% / 4) + 5px);
    min-width: calc((100% / 4) + 5px);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
.orderItem .van-cell__value .main .foodList .foodItem .img{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}
.orderItem .van-cell__value .main .foodList .foodItem img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.orderItem .van-cell__value .main .foodList .foodItem .foodStatus{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
    width: 100%;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
}
.orderItem .van-cell__value .main .oneFoodName{
    flex-grow: 1;
    word-break: break-all;
    word-wrap: break-word;
    text-align: left;
    color: #000;
}
.orderItem .van-cell__value .main .orderSettle{flex-shrink: 0;width: 20%;font-size: 13px;}
.orderItem .van-cell__value .main .orderSettle .orderPrice{color: #000;}
.orderItem .van-cell__value .main .orderSettle .orderPrice span{margin-left: 2px;;font-size: 16px;}

.orderItem .van-cell__value .foot{
    width: 100%;
    margin: 5px 0;
}
.funcGroup{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.funcGroup .van-button{
    min-width: 95px;
    height: 35px;
    font-size: 14px;
    padding: 0 10px;
    margin-left: 10px;
}
</style>